<template>
	<view class="container">
		<top-back-navbar position="fixed" title="持仓社区" background="rgb(0, 53, 99)" color="#fff"></top-back-navbar>
		<cxsytabbars :current="0"></cxsytabbars>
		<view class="titile_box">
			<view class="img_box">

				<view class="avatar">
					<image v-if="shequ_data.avatar == ''" style="width: 100%;height: 100%;"
						src="../../static/images/home/active.png" mode=""></image>
					<image v-if="shequ_data.avatar != ''" style="width: 100%;height: 100%;" :src="shequ_data.avatar"
						mode=""></image>
				</view>

			</view>
			<view class="txt_box">
				<view class="txt_box_top" style="display: flex;align-items: center;">
					<p>自身业绩</p>
					<span style="font-size: 24px;margin-left:10px;margin-top: -6px;">¥{{shequ_data.zs_yj}}</span>
				</view>
				<view class="" style="display: flex; justify-content: space-between;width: calc(100vw - 180px);">
					<view class="" style="">
						<p>ID号: {{shequ_data.my_id}}</p>
					</view>
					<view class="" style="">
						<p>级别: {{shequ_data.levelname}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="router_box">


			<view class="" style="
				background: url('/static/images/home/za_xiaoshou_active.png');
				background-size: 100% 100%;
				background-repeat: no-repea;height:74px;">
			</view>
			<view class="" style="
				background-image: url('/static/images/home/za_chicang.png');
				background-size: 100% 100%;
				background-repeat: no-repea;height:74px;"
				@click="to_next_page">
			</view>

		</view>

		<view class="num_list ">
			<view class="">
				<p>总业绩 <br> {{shequ_data.zyj}}</p>
			</view>
			<view class="">
				<p>当日业绩 <br>{{shequ_data.day_yj}}</p>
			</view>
			<view class="">
				<p>粉丝人数 <br>{{shequ_data.z_num}}</p>
			</view>
			<view class="">
				<p>粉丝有效数 <br>{{shequ_data.yx_num}}</p>
			</view>

		</view>

		<view class="user_lsit">
			<view class="box" v-for="item,index in show_data_lsit" :key="item.id">
				<view class="box_top">
					<view class="">
						{{item.mobile}}
					</view>
					<view class="ID">
						ID号{{item.id}}
					</view>
					<view class="" v-show="item.now_type=='father'">
						<view class="" v-if="item.can_sell_child==1"
							:style="item.imgurl" @click="item.show=!item.show;get_next_usesr(item,index,$event)">
						</view>
						<view class="" v-else
							style="background-image: url('/static/images/home/za_nochakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;">
						</view>
					</view>
					<view class="" v-show="item.now_type!='father'" style="opacity: 0;">
						
						<view class=""
							style="background-image: url('/static/images/home/za_nochakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;">
							
						</view>
					</view>
				</view>
				<view class="box_center">
					<view class="box_center_item">
						<view class="" style="font-size: 18px;">
							总业绩
						</view>
						<view class="" style="font-size: 16px;">
							¥{{item.zyj}}
						</view>
					</view>
					<view class="box_center_item">
						<view class="">
							当日业绩
						</view>
						<view class="">
							{{item.day_yj}}
						</view>
					</view>
					<view class="box_center_item">
						<view class="">
							本人消费
						</view>
						<view class="">
							{{item.zs_yj}}
						</view>
					</view>
				</view>
				
				<view class="box_bottom">
					<view class="">
						无效会员{{item.wx_num}}人 
					</view>
					<view class="">
						有效会员{{item.yx_num}}人
					</view>
					<view class="">
						{{to_text(item.za_isbaodan)}}
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				shequ_data: {},
				css_bgi:"background-image: url('/static/images/home/za_chakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;",
				css_bgi_active:"background-image: url('/static/images/home/za_nochakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;",
				css_bgi_show:false,
				child_data:{},
				show_data_lsit:[],
			};
		},
		onLoad: function() {
			var _this = this
			var id = uni.getStorage({
				key: 'openid',
				success: function(res) {
					var id = res.data
					_this.get_openid(id)
					_this.get_chicang_shequ()
				},
				fail: function(err) {
					uni.navigateTo({
						url: '/pagesZA/home/home'
					});
				}
			});
			
		},
		methods: {
			to_next_page(){
				
				uni.navigateTo({
					url: '/pagesZA/media/media'
				});
			},
			init_child_data(value){
				var data =value
				for(var i= 0;i<data.user_list.length;i++){
					data.user_list[i].show=false
					data.user_list[i].imgurl="background-image: url('/static/images/home/za_chakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;"
					data.user_list[i].now_type='child'
				}
				return data
			},
			get_next_usesr(value,index,){
				
				var openid=value.openid
				var id= value.id
				if(value.show){
					this.shequ_data.user_list[index].imgurl=this.css_bgi_active
					uni.request({
						url: this.$BASE_URL +
							'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.za_xiaoshou_shequ&app=1&openid=' +
							openid,
					
						success: res => {
							var data = res.data
							var code = data.error
							console.log(data);
							var data = this.init_child_data(data)
							
							this.init_show_data(data.user_list,index,id)
						},
						fail: () => {},
						complete: () => {
							uni.hideLoading();
						}
					});
				}else{
					this.shequ_data.user_list[index].imgurl=this.css_bgi
					this.delete_data(id)
				}
			},
			delete_data(id){
				
				var arr = JSON.stringify(this.show_data_lsit)
				arr=JSON.parse(arr)
				arr=arr.filter((item)=>{
					return item.father_id!=id
				})
				this.show_data_lsit = arr
			},
			init_show_data(arr,index,id){
				
				for(var i =0;i<arr.length;i++){
					arr[i].father_id=id
					index++
					this.show_data_lsit.splice(index,0,arr[i])
				}
			},
			to_text(value){
				if(value == 1){
					return '本人已下单'
				}else{
					return '本人未下单'
				}
			},
			init_data(value){
				
				var data =value
				for(var i= 0;i<data.user_list.length;i++){
					data.user_list[i].show=false
					data.user_list[i].imgurl="background-image: url('/static/images/home/za_chakan.png');background-size: 100% 100%;background-repeat: no-repeat;    width: 72px;height: 32px;"
					data.user_list[i].now_type='father'
				}
				this.shequ_data = data
				this.show_data_lsit=data.user_list
			},
			get_openid(id) {
				this.openid = id
			},
			get_chicang_shequ() {
				var _this=this
				var openid = this.openid
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL +
						'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.za_xiaoshou_shequ&app=1&openid=' +
						openid,

					success: res => {
						var data = res.data
						var code = data.error
						console.log(data);
						if (code == 0) {
							_this.init_data(data)
							
						} else {
							uni.showToast({
								title: data.message,
								icon: 'none',
								duration: 1500,
								position: 'center',

							})
						}

					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {

		height: 100vh;
		background: url('/static/images/home/za_zixun_bg.png') 0 0 no-repeat;
		// background-size: 150% 106%;
		position: relative;
		padding: 0 10px;
		overflow: auto;
	}

	.titile_box {
		display: flex;
		color: #fff;
		padding: 15px;

		.img_box {
			width: 72px;
			height: 72px;
			background: url('/static/images/home/za_shequ_avatar.png') 0 0 no-repeat;
			background-size: 100% 100%;
			border-radius: 50%;
			overflow: hidden;
			position: relative;

			// padding: 10px;
			.avatar {
				width: 50px;
				height: 50px;
				// padding: 10px;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			image {
				width: 100%;
				height: 100%;

			}
		}

		.txt_box {
			margin-left: 15px;
		}

		p {
			font-size: 14px
		}
	}

	.router_box {
		width: 100%;
		display: flex;
		justify-content: space-around;

		view {
			width: 50%;
		}
	}

	.num_list {
		width: 100%;
		display: flex;
		justify-content: space-between;

		view {
			background: url('/static/images/home/za_yeji_item.png');
			width: 25%;
			height: 98px;
			background-size: 100% 98px;
			text-align: center;
			display: flex;
			align-items: center;

			p {
				width: 100%;
				color: #fff;
				font-size: 12px;
				text-align: center;

			}

		}
	}

	.user_lsit {
		width: 100%;

		.box {
			background: url('/static/images/home/za_item_bg.png');
			background-size: 100% 100%;
			padding: 20px 20px 20px;
			border-radius: 10px;
			position: relative;
			z-index: 0;
			.box_top {
				display: flex;
				justify-content: space-between;
				color: #fff;
				.ID{
					display: block;
					position: absolute;
					width: 100px;
					top: 10px;
					right: 0;
					left: 0;
					margin: auto;
					text-align: center;
				}
			}

			.box_center {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				color: #fff;
				.box_center_item{
					width: 30%;
					text-align: center;
				}
			}
				
			.box_bottom{
				display: flex;
				justify-content: space-between;
				color:#fff;
			}
		}

	}
</style>